<template>
    <transition name="slide-fade">
        <div class="food" v-show="showFlag" ref="food">
            <div class="food-content">
                <div class="image-header">
                    <img :src="food.image" />
                    <div class="back" @click="show()"><i class="icon-arrow_lift"></i></div>
                </div>
                <div class="content">
                    <h1 class="title">{{ food.name }}</h1>
                    <div class="detail">
                        <span class="sell-count">月售{{ food.sellCount }}</span>
                        <span class="rating">好评率{{ food.rating }}%</span>
                    </div>
                    <div class="price">
                        <span class="now">￥{{ food.price }}</span>
                        <span class="old" v-show="food.oldPrice">￥{{ food.oldPrice }}</span>
                    </div>
                     <div class="cartcontrol-wrapper">
                        <cartcontrol :food="food"></cartcontrol>
                        <transition name="fade">
                        <div @click="addFirst" class="buy" v-show="!food.count || food.count === 0">加入购物车</div>
                        </transition>
                    </div>
                </div>
                <split v-show="food.info"></split>
                <div class="info">
                    <h1 class="title">商品介绍</h1>
                    <p class="text">{{food.info}}</p>
                </div>
                <split v-show="food.info"></split>
                <div class="rating">
                    <h1 class="title">商品评价</h1>
                    <ratingselect :selectType="selectType" :onlyContent="onlyContent" :desc="desc" :ratings="food.ratings"
                    @ratingType_select="ratingTypeSelect" @content_toggle="contentToggle"></ratingselect>
                    <div class="rating-wrapper">
                        <ul v-show="food.ratings && food.ratings.length">
                            <li v-show="needShow(rating.rateType,rating.text)" v-for="rating in food.ratings" class="rating-items">
                                <div class="user">
                                    <span class="name">{{rating.username}}</span>
                                    <img class="avatar" width="12" height="12" :src="rating.avatar"/>
                                </div>
                                <div class="time">{{rating.rateTime | dateFormat}}</div>
                                <p class="text">
                                    <span :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></span>
                                    <span>{{rating.text}}</span>
                                </p>
                            </li>
                        </ul>
                        <div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评价信息</div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
import {formatdate} from '../../common/js/dateFormat.js';
import BScroll from 'better-scroll';
import cartcontrol from '../cartcontrol/cartcontrol.vue';
import Vue from 'vue';
import split from '../split/split.vue';
import ratingselect from '../ratingselect/ratingselect.vue';

const ALL = 2;
export default {
    props:{
        food:{
            type:Object
        }
    },
    data(){
        return{
            showFlag:false,
            selectType:ALL,
            onlyContent:false,
            desc:{
                all:'全部',
                positive:'推荐',
                negative:'吐槽'
            }
        };
    },
    methods:{
        show(){
            this.showFlag=!this.showFlag; 
            this.selectType=ALL;
            this.$nextTick(() => {
                if(!this.scroll){
                    this.scroll = new BScroll(this.$refs.food,{
                        click:true
                    });
                }else{
                    this.scroll.refresh();
                }
            })
        },
        addFirst(){
            Vue.set(this.food,'count',1);
        },
        needShow(type,text){
            if(this.onlyContent&&!text){
                return false;
            }
            if(this.selectType === ALL){
                return true;
            }else{
                return type === this.selectType;
            }
        },
        ratingTypeSelect(type){
            this.selectType=type;
            this.$nextTick(() => {
                this.scroll.refresh();
            });
            
        },
        contentToggle(only_Content){
            this.onlyContent=only_Content;
            this.$nextTick(() => {
                this.scroll.refresh();
            });
        },
        
    },
    filters:{
        dateFormat(time){
            return formatdate(time);
        }
    },
    components:{
        cartcontrol,
        split,
        ratingselect
    }

};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin.styl'
.slide-fade-enter, .slide-fade-leave-to
    transform translate3d(100%, 0, 0)
.food
    position fixed
    left 0
    top 0
    bottom 48px
    z-index 30
    width 100%
    background #fff
    transition all 0.2s linear
    .image-header
        position relative
        width 100%
        height 0
        padding-top 100%
        img
            position absolute
            top 0
            left 0
            width 100%
            height 100%
        .back
            position absolute
            top 10px
            left 0
            .icon-arrow_lift
                display block
                padding 10px
                font-size 20px
                color #fff
    .content
        position relative
        padding 18px 18px 0 18px
        .title
            line-height 14px
            margin-bottom 8px
            font-size 14px
            font-weight 700
            color rgb(7, 17, 27)
        .detail
            margin-bottom 18px
            height 10px
            line-height 10px
            font-size 0
            .sell-count, .rating
                font-size 10px
                color rgb(14, 153, 159)
            .sell-count
                margin-right 12px
        .price
            font-weight 700
            line-height 24px
            .old
                text-decoration line-through
                font-size 10px
                color rgb(147, 153, 159)
            .now
                margin-right 8px
                font-size 14px
                color rgb(240, 20, 20)
    .cartcontrol-wrapper
        position absolute
        right 12px
        bottom 12px
    .fade-enter-active
        transition all 0.3s
    .fade-leave-active
        transition all 0.3s
    .buy
        position absolute
        right 7px
        bottom 7px
        z-index 10
        height 24px
        width 78px
        line-height 24px
        text-align center
        padding 0 12px
        box-sizing border-box
        border-radius 12px
        font-size 10px
        color #fff
        background rgb(0, 160, 220)    
    .info
        padding 18px
        .title
            line-height 14px
            margin-bottom 6px
            font-size 14px
            color rgb(7,17,27)
        .text
            line-height 24px
            padding 0 18px
            font-size 10px
            color rgb(77,85,93)
    .rating-wrapper
        padding 13px
    .title
        line-height 14px
        padding: 18px 0 0 13px
        font-size 14px
        color rgb(7,17,27)
    .rating-items
        position relative
        padding 16px 0
        border-1px(rgba(7,17,27,0.1))
        .user
            position absolute
            right 0 
            top 16px
            line-height 12px
            font-size 0
            .name
                display inline-block
                margin-right 6px
                vertical-align top
                font-size 10px
                color rgb(147,153,159)
            .avatar
                box-sizing border-box
                border-radius 50%
         .time
            margin-bottom 6px
            line-height 12px
            font-size 10px
            color rgb(147,153,159)   
        .text
            line-height 16px               
            font-size 12px
            color rgb(7,17,27)
            .icon-thumb_down,.icon-thumb_up
                margin-right 4px
                font-size 12px
            .icon-thumb_up
                color rgb(0,160,220)
            .icon-thumb_down
                color rgb(147,153,159)
    .no-rating
        padding 16px 0
        font-size 12px
        color rgb(147,153,159)    
</style>
